<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function get01() {
				//根据标签的id属性获取标签节点对象
				var a = document.getElementById('d1');
				a.innerText = "李四";
			}

			function get02() {
				//根据标签的class属性获取标签节点对象(数组)
				var div = document.getElementsByClassName('d2')[1];
				div.innerText = "李思思";
			}

			function get03() {
				//根据标签的名称获取标签节点对象(数组)
				var a = document.getElementsByTagName('a')[0];
				a.innerHTML = "<span style='color:orange;'>京东</span>"
			}

			function get04() {
				//根据选择器获取第一个节点对象
				var div = document.querySelector('.d2');
				div.innerHTML = "美团";
			}
			
			function get05(){
				//根据选择器获取所有节点对象
				var div = document.querySelectorAll('.d2');
				div[0].innerHTML = "美团";
			}
		</script>
	</head>
	<body>
		<div id="d1">张三</div>
		<div class="d2">李四</div>
		<div class="d2">王五</div>
		<a href="https://www.atstudy.com/">学掌门</a>
		<button onclick="get01()">getElementById</button>
		<button onclick="get02()">getElementsByClassName</button>
		<button onclick="get03()">getElementsByTagName</button>
		<button onclick="get04()">querySelector</button>
		<button onclick="get05()">querySelectorAll</button>
	</body>
</html>
